import { Layout } from "antd"
import { useState } from "react"
import ApiTreePanel from "./ApiTreePanel";
import type { MethodWithServiceInfo } from "@linksaas-minapp/grpc-proxy-api";
import MethodCallList from "./MethodCallList";
import type { GrpcServerInfo } from "@linksaas-minapp/api/extra_info";


function App() {
  const [grpcApiId, setGrpcApiId] = useState("");
  const [grpcInfo, setGrpcInfo] = useState<GrpcServerInfo>({});
  const [curMethodList, setCurMethodList] = useState<MethodWithServiceInfo[]>([]);

  return (
    <Layout hasSider style={{ height: "100vh" }}>
      <Layout.Sider width={"250px"} theme="light">
        <ApiTreePanel curMethodList={curMethodList} grpcApiId={grpcApiId} onChange={(newGrpcApiId, newGrpcInfo) => {
          setGrpcApiId(newGrpcApiId);
          setGrpcInfo(newGrpcInfo);
          setCurMethodList([]);
        }}
          onSelect={method => {
            const tmpList = curMethodList.slice();
            const index = tmpList.findIndex(item => item.serviceName == method.serviceName && item.method.methodName == method.method.methodName);
            if (index == -1) {
              tmpList.push(method);
              setCurMethodList(tmpList);
            }
          }} />
      </Layout.Sider>
      <Layout.Content>
        <MethodCallList grpcInfo={grpcInfo} grpcApiId={grpcApiId} curMethodList={curMethodList} onClose={method => {
          const tmpList = curMethodList.filter(item => !(item.serviceName == method.serviceName && item.method.methodName == method.method.methodName));
          setCurMethodList(tmpList);
        }} />
      </Layout.Content>
    </Layout>
  )
}

export default App
